@charset "utf-8";
@function n($px) {
    @return $px/2;
}
.clear {
    clear: both;
}
.index.active {
    .logo {
        animation-name: flip;
    }
    .test {
        animation-name: bounceInDown;
    }
    .hold {
        animation-name: bounceInDown;
        animation-delay: 1.5s;
    }
    .text_1 {
        animation-name: bounceInUp;
        animation-delay: 1.5s;
    }
    .text_2 {
        animation-name: bounceInUp;
    }
    .text_3 {
        animation-name: slideInLeft;
    }
    .text_4 {
        animation-name: slideInRight;
    }
    .text_5 {
        animation-name: slideInRight;
    }
    .text_6 {
        animation-name: slideInLeft;
    }
    .people {
        -webkit-animation: people 2s linear;
    }
}
.index {
    background: url("../img/index.jpg") no-repeat;
    height: 100%;
    background-size: cover;
    .kogo {
        margin: 0 auto;
        width: n(500px);
        .logo {
            padding-top: n(44px);
            width: n(103px);
            img {
                width: 100%;
            }
        }
    }
    .test {
        width: n(383px);
        margin: n(40px) auto 0;
        img {
            width: 100%;
        }
    }
    .hold {
        width: n(575px);
        margin: n(-20px) auto 0;
        img {
            width: 100%;
        }
    }
    .text_1 {
        width: n(352px);
        margin: -10px auto 0;
        img {
            width: 100%;
        }
    }
    .text_2 {
        width: n(344px);
        margin: 0 auto;
        img {
            width: 100%;
        }
    }
    .miyue {
        position: relative;
        width: n(544px);
        margin: n(40px) auto 0;
        height: 215px;
        .moon {
            width: n(64px);
            position: absolute;
            right: n(70px);
            border-radius: 50%;
            box-shadow: 0px 0px 25px 26px rgba(98,208,203,.5);
            -webkit-animation: moon 5s linear infinite;
            img {
                width: 100%;
            }
            @-webkit-keyframes moon {
                0% {
                    -webkit-transform: rotateY(-760deg) rotateX(-180deg) translateZ(200px);
                }
            }
        }
        .text_3 {
            width: n(94px);
            position: absolute;
            left: 0;
            top: n(86px);
            img {
                width: 100%;
            }
        }
        .people {
            width: n(322px);
            position: absolute;
            left: n(106px);
            top: 0;
            img {
                width: 100%;
            }
            @-webkit-keyframes people {
                0% {
                    -webkit-transform: scaleX(0.5) scaleY(0.5);
                }
            }
        }
        .text_4 {
            width: n(150px);
            position: absolute;
            right: 0;
            top: n(97px);
            img {
                width: 100%;
            }
        }
        .text_5 {
            width: n(90px);
            position: absolute;
            top: n(328px);
            right: n(10px);
            img {
                width: 100%;
            }
        }
        .text_6 {
            width: n(124px);
            position: absolute;
            left: 0;
            top: n(320px);
            img {
                width: 100%;
            }
        }
    }
    .but {
        margin: 20px auto;
        width: n(170px);
        input {
            width: n(170px);
            height: n(70px);
            background: #ffb800;
            border-radius: 10px;
            font-size: n(30px);
            font-weight: bold;
            box-shadow: 2px 3px 4px 2px rgba(16,1,49,.5);
        }
    }
}
@media only screen and (max-height:n(940px) ) {
    .index {
        .miyue {
            margin: 0 auto;
        }
        .but {
            margin-top: -6px;
        }
    }
}
